<template>
  <div>
    <div class="p-title">{{ nav.Tracks }}</div>
    <div v-if="proList.length" class="pro-box">
      <div class="pro-main" v-for="item in proList" :key="item.id" @click="goDetail(item.id)">
        <img class="p-img" :src="item.picUrl" alt="" />
        <div class="p-name">{{ item.spuName }}</div>
        <!-- <div class="p-info">
          <div class="f14">Weight：{{ item.weight }}</div>
          <div class="f14">Width：{{ item.width }}</div>
        </div> -->
        <div class="p-price">
          <span class="f14 fb">{{ store.currency }} {{ roundFractional((item.price || 0) / 100, 2) }}</span>
          <span class="f14">/m</span>
        </div>
      </div>
    </div>
    <div v-if="proList.length" class="page-box">
      <a-pagination
        v-model:current="pageInfo.current"
        :defaultPageSize="pageInfo.size"
        :total="pageInfo.total"
        show-less-items
        @change="pageChange"
      />
    </div>
    <div class="noMess">{{ mess.noHistory }}</div>
  </div>
</template>

<script lang="ts" setup>
import { language } from "~/conf";
import { commonStore } from "~/components/store";
const store = commonStore();
const { nav, mess } = language;
type Tpro = {
  id: number;
  spuId: number;
  spuName: string;
  picUrl: string;
  price: number;
};
let proList = ref<Tpro[]>([]);
let pageInfo = ref({
  current: 1,
  total: 0,
  size: 20,
});
const init = async () => {
  const { data } = await useServerFetch<{ list: Tpro[]; total: number }>(
    "/app-api/product/browse-history/page",
    {
      method: "post",
      query: {
        page: pageInfo.value.current,
        pageSize: 20,
      },
    }
  );
  if (data.list && data.list.length) {
    proList.value = data.list;
  }
  pageInfo.value.total = data.total;
};
const pageChange = () => {
  init();
};
const goDetail = (id: number) => {
  navigateTo({ path: `/prodetail/${id}` });
};
init();
</script>

<style lang="stylus" scoped>
.p-title{
  font-weight: bold;
  font-size: 22px;
  margin-bottom 22px;
}
.pro-box{
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  flex-wrap:wrap;
  .pro-main{
    cursor pointer
    margin-right 20px;
    .p-img{
      width: 231px;
      height: 230px;
    }
    .p-name{
      width 246px
      height:38px;
      font-size: 14px;
      margin-top 15px
      font-weight: 500;
    }
    .p-price{
      margin-top 11px
    }
  }
}
.page-box{
  width 786px;
  text-align: right;
  margin-top 20px
}
.f14{
  font-size 14px
  font-weight: 300;
}
.fb{
  font-weight bold
}
.noMess{
  font-weight: 300;
  font-size: 14px;
  color: #999999;
  text-align: center;
  margin-top 35px
}
</style>
